<template>
	<section>
		<el-row :gutter="20">
			<!--工具条-->
			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
				<el-form :inline="true" :model="filters">
					<el-form-item>
						<el-input v-model="filters.keyword" placeholder="任务号"></el-input>
					</el-form-item>
					<el-form-item>
						<el-select v-model="filters.obtainStatus" placeholder="状态">
							<el-option label="全部" value=""></el-option>
							<el-option label="已有提交" value="1"></el-option>
							<el-option label="申请延期" value="3"></el-option>
							<el-option label="申请取消" value="6"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" v-on:click="getUsers">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>
			<!--统计-->
            <el-col :span="4"><div class="grid-content bg-purple">总数:{{out_data.totalCount}}</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">进行中:{{out_data.typeOne}}</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">已有提交:{{out_data.typeTwo}}</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">取消申请:{{out_data.typeThree}}</div></el-col>
			<el-col :span="4"><div class="grid-content bg-purple">延期申请:{{out_data.typeFour}}</div></el-col>
			<el-col :span="4"><div class="grid-content bg-purple">议价申请:{{out_data.typeFive}}</div></el-col>
        </el-row>

		<!--列表-->
		<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;margin-top: 20px;">
			<el-table-column type="index" width="60">
			</el-table-column>
            <el-table-column prop="taskId" label="ID" width="80" >
			</el-table-column>
			<el-table-column prop="keyword" label="任务号" width="150" >
			</el-table-column>
			<el-table-column prop="name" label="任务名" width="150" >
			</el-table-column>
			<el-table-column prop="type" label="任务类型" width="100" >
			</el-table-column>
			<el-table-column prop="taskNick" label="发布人昵称" width="150" >
			</el-table-column>
			<el-table-column prop="obtainStatus" label="审核状态" width="100" :formatter="formatStatus" >
			</el-table-column>
			<el-table-column prop="updateTime" label="审核时间" :formatter="formatDate" width="180" >
			</el-table-column> 
			<el-table-column label="操作" min-width="150">
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
					<el-button type="primary" size="small" @click="goAudit(scope.row.id, '1', scope.$index, scope.row)" v-if="scope.row.schoolStatus == 0">审核通过</el-button>
					<el-button type="danger" size="small" @click="goAudit(scope.row.id, '2', scope.$index, scope.row)" v-if="scope.row.schoolStatus == 0">审核不通过</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
			</el-pagination>
		</el-col>

	</section>
</template>

<script>
    import util from '../../common/js/util'
	//import NProgress from 'nprogress'
    import { getTaskObtainList } from '../../api/api';
    import moment from 'moment'

	export default {
		data() {
			return {
				filters: {
					keyword: '',
					obtainStatus: '',
				},
				users: [],
				out_data: {
                    totalCount:"",
                    typeOne:"",
                    typeTwo:"",
					typeThree:"",
					typeFour:"",
                    typeFive:"",
                },
				total: 0,
				page: 1,
				size: 10,
				listLoading: false,
				sels: [],//列表选中列

			}
		},
		methods: {
			formatStatus: function (row, column) {
				if(row.obtainStatus == 0){
					return '未提交';
				}else if(row.obtainStatus == 1){
					return '已提交';
				}else if(row.obtainStatus == 2){
					return '后台提交给委托方';
				}else if(row.obtainStatus == 3){
					return '申请延期';
				}else if(row.obtainStatus == 4){
					return '延期开发中';
				}else if(row.obtainStatus == 5){
					return '被退回修改中';
				}else if(row.obtainStatus == 6){
					return '申请取消';
				}else if(row.obtainStatus == 7){
					return '已取消';
				}else if(row.obtainStatus == 8){
					return '审核通过';
				}else if(row.obtainStatus == 9){
					return '已打款';
				}else{
					return '';
				}
            },
            formatDate: function(row, column){
                return moment(row.updateTime).format("YYYY-MM-DD HH:mm:ss")
            },
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			//获取用户列表
			getUsers() {
				let para = {
					page: this.page,
					size: this.size,
					keyword: this.filters.keyword,
					obtainStatus: this.filters.obtainStatus,
				};
				this.listLoading = true;
                //NProgress.start();
				getTaskObtainList(para).then((res) => {
                    //console.log("-------------")
                    //console.log(res.data.data)
					this.total = res.data.data.length;

					this.users = res.data.data;
					this.out_data.totalCount = res.data.out_data.totalCount;
                    this.out_data.typeOne = res.data.out_data.typeOne;
                    this.out_data.typeTwo = res.data.out_data.typeTwo;
					this.out_data.typeThree = res.data.out_data.typeThree;
					this.out_data.typeFour = res.data.out_data.typeFour;
                    this.out_data.typeFive = res.data.out_data.typeFive;
                    this.total = parseInt(res.data.out_data.totalCount);

					this.listLoading = false;
					//NProgress.done();
				});
			},

			//显示查看界面
			handleEdit: function (index, row) {
				this.$router.push('taskdetail?id='+row.obtainId)
			},
			selsChange: function (sels) {
				this.sels = sels;
			}
		},
		mounted() {
			this.getUsers();
		}
	}

</script>

<style scoped>
	.el-col {
        padding: 10px 10px;
    }
	.bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
        line-height: 36px;
        text-align: center;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>